<template>
  <vxe-modal
    title="查看软件著作权信息"
    v-model="dialogVisible"
    v-if="dialogVisible"
    :loading="loading"
    width="80%" showFooter esc-closable show-zoom resize>

    <div style="height: 69vh; overflow-y: auto;">
      <el-card class="box-card" shadow="never" :body-style="{ padding: '10px',backgroundColor: '#bfcdda' }">
        <!-- 基本资料 -->
        <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span style="font-size: 16px; color: #1890ff;">基本资料</span>
          </div>
          <el-descriptions class="margin-top" :column="2" size="medium" border
                           :contentStyle="content_style" :labelStyle="label_style">
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  项目名称：
                </div>
              </template>
              {{ jjkcSqData.xmName }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  项目编号：
                </div>
              </template>
              {{ jjkcSqData.xmBh }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  行业分类：
                </div>
              </template>
              {{ jjkcSqData.hyFl }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  课题归属：
                </div>
              </template>
              {{ jjkcSqData.ktGs }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  研究总经费(万元)：
                </div>
              </template>
              {{ jjkcSqData.yjZjf }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  本年度发生额(元)：
                </div>
              </template>
              {{ jjkcSqData.bndFse }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  鉴定年度：
                </div>
              </template>
              {{ jjkcSqData.jdNd }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  承担单位 ：
                </div>
              </template>
              {{ jjkcSqData.cdDw }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  项目负责人：
                </div>
              </template>
              {{ jjkcSqData.xmFzName }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  联系电话：
                </div>
              </template>
              {{ jjkcSqData.lxDh }}
            </el-descriptions-item>

          </el-descriptions>
        </el-card>
        <br>
        <!-- 一、企业基本信息 -->
        <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span style="font-size: 16px; color: #1890ff;">一、企业基本信息</span>
          </div>
          <el-descriptions class="margin-top" :column="2" size="medium" border
                           :contentStyle="content_style" :labelStyle="label_style">
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  企业名称(盖章) ：
                </div>
              </template>
              {{ jjkcSqData.qyName }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  法人代表：
                </div>
              </template>
              {{ jjkcSqData.frDb }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  通讯地址：
                </div>
              </template>
              {{ jjkcSqData.txDz }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  企业联系电话(座机)：
                </div>
              </template>
              {{ jjkcSqData.qyLxDh }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  企业所属国民经济行业：
                </div>
              </template>
              {{ jjkcSqData.qySsGmjjHy }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  企业类型：
                </div>
              </template>
              {{ jjkcSqData.qyLx }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  职工总人数：
                </div>
              </template>
              {{ jjkcSqData.zgZrs }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  研发人员数 ：
                </div>
              </template>
              {{ jjkcSqData.yfRys }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  年度销售收入(万元)：
                </div>
              </template>
              {{ jjkcSqData.ndXsSr }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  年度利税(万元)：
                </div>
              </template>
              {{ jjkcSqData.ndLs }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  联系人：
                </div>
              </template>
              {{ jjkcSqData.lxr }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  联系电话：
                </div>
              </template>
              {{ jjkcSqData.lxDh }}
            </el-descriptions-item>

          </el-descriptions>
        </el-card>
        <br>
        <!-- 二、研发项目情况 -->
        <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span style="font-size: 16px; color: #1890ff;">二、研发项目情况</span>
          </div>
          <el-descriptions class="margin-top" :column="2" size="medium" border
                           :contentStyle="content_style" :labelStyle="label_style">
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  项目名称 ：
                </div>
              </template>
              {{ jjkcSqData.xmName }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  项目编号：
                </div>
              </template>
              {{ jjkcSqData.xmBh }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  项目有效期限：
                </div>
              </template>
              {{ jjkcSqData.xmYxQx }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  总经费：
                </div>
              </template>
              {{ jjkcSqData.zjf }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  企业自筹金额：
                </div>
              </template>
              {{ jjkcSqData.qyZcJe }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  银行贷款：
                </div>
              </template>
              {{ jjkcSqData.yhDk }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  上年度研发费实际发生额：
                </div>
              </template>
              {{ jjkcSqData.sndYffSjfs }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  项目开发形式：
                </div>
              </template>
              {{ jjkcSqData.xmKfXs }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  项目目前所处阶段：
                </div>
              </template>
              {{ jjkcSqData.xmMqScJd }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  研发活动类型：
                </div>
              </template>
              {{ jjkcSqData.yfHdLx }}
            </el-descriptions-item>

          </el-descriptions>
        </el-card>
        <br>
        <!-- 三、项目主要研究内容 -->
        <el-card class="box-card" shadow="hover" style="min-height: 25vh">

          <div slot="header" class="clearfix">
            <span style="font-size: 16px; color: #1890ff;">三、项目主要研究内容</span>
          </div>
          <span style="font-size: 16px; color: #000000; font-weight: 600">1、目的及组织方式：</span>
          <div class="ql-container ql-snow" style="border: 1px solid #ffffff;">
            <div class="ql-editor" style="font-size: 16px">
              <div v-html="jjkcSqData.mdJZzfs"></div>
            </div>
          </div>

          <span style="font-size: 16px; color: #000000; font-weight: 600">2、核心技术及创新点:</span>
          <div class="ql-container ql-snow" style="border: 1px solid #ffffff;">
            <div class="ql-editor" style="font-size: 16px">
              <div v-html="jjkcSqData.hxjsJCxd"></div>
            </div>
          </div>

          <span style="font-size: 16px; color: #000000; font-weight: 600">3、取得成果:</span>
          <div class="ql-container ql-snow" style="border: 1px solid #ffffff;">
            <div class="ql-editor" style="font-size: 16px">
              <div v-html="jjkcSqData.qdCg"></div>
            </div>
          </div>
        </el-card>
        <br>
        <!-- 技术资料目录 -->
        <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span style="font-size: 16px; color: #1890ff">技术资料目录</span>
          </div>
          <el-row :gutter="20">
            <el-col :span="6" :xs="24">
              <div class="head-container">
                <el-tree
                  :data="fileOptions"
                  :props="defaultProps"
                  :expand-on-click-node="false"
                  :filter-node-method="filterNode"
                  ref="tree"
                  node-key="id"
                  default-expand-all
                  highlight-current
                  @node-click="handleNodeClick"
                  :render-content="renderContent"
                />
              </div>
            </el-col>
            <el-col :span="18" :xs="24">
              <el-table height="33vh" :header-cell-style="{background:'#d0cece',color:'#000000',fontWeight:'bold'}"
                        :data="jjkcsqFjList" v-loading="loadingFj">
                <el-table-column label="序号" align="center" type="index" width="50"/>
                <el-table-column label="文件类型" align="center" prop="fileType"/>
                <el-table-column label="文件名称" align="center" prop="fileName" :formatter="getFileNames"/>
                <el-table-column label="文件大小" align="center" prop="fileSize" width="120"/>
                <el-table-column label="操作" width="120" align="center" class-name="small-padding fixed-width">
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      type="text"
                      icon="el-icon-view"
                      @click="handlePreview(scope.row)"
                    >预览
                    </el-button>
                    <el-button
                      size="mini"
                      type="text"
                      icon="el-icon-edit"
                      @click="handleDownload(scope.row)"
                    >下载
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
        </el-card>
        <br>

      </el-card>
    </div>

    <div slot="footer" class="dialog-footer dialog-footer-center">
      <el-button @click="dialogVisible=false">关闭</el-button>
    </div>

    <!-- 预览组件 -->
    <KkFileView ref="preview"/>
  </vxe-modal>
</template>
<script>

import {getJjkcsq, selectJjkcsqFjList} from "@/api/jjkc/jjkcsq";
import KkFileView from "@/views/components/KKFileView/kkFileView.vue";

export default {
  name: "JjKcSqXq",
  components: {KkFileView},
 //加计扣除申请详情组件
  data() {
    return {
      fileOptions: [{ //附件类型树表
        id: 1,
        label: '1.企业研究开发项目情况表(word)',
        type: '企业研究开发项目情况表'
      }, {
        id: 2,
        label: '2.研发开发计划任务书(word)',
        type: '研发开发计划任务书'
      }, {
        id: 3,
        label: '3.项目组的编制情况和研发人员名单(word)',
        type: '项目组的编制情况和研发人员名单'
      }, {
        id: 4,
        label: '4.立项决议文件(pdf)',
        type: '立项决议文件'
      }, {
        id: 5,
        label: '5.研究开发项目的合同(pdf)',
        type: '研究开发项目的合同',
        children: [{
          id: 6,
          label: '5.1合同变更',
          type: '合同变更',
        }]
      }, {
        id: 7,
        label: '6.研究成果报告(word)',
        type: '研究成果报告'
      }, {
        id: 8,
        label: '7.其他证明(jpg,pdf)',
        type: '其他证明'
      }, {
        id: 9,
        label: '8.归集表(word,pdf,excel)',
        type: '归集表'
      }],
      jjkcsqFileType: "企业研究开发项目情况表", //默认的附件类型
      defaultProps: {children: "children", label: "label"}, // 表单参数
      // 加计扣除申请附件表格数据
      jjkcsqFjList: [],
      loadingFj: false,
      loading: false,
      jjkcSqData: [], //加计扣除申请基本资料
      jjkcsqId: null, //加计扣除申请主键ID
      dialogVisible: false,
      content_style: {
        // 解决不对齐的问题
        'width': "600px",
        // 排列第二行
        'word-break': 'break-all',
        // 'background-color': '#f3f7ff'
      },
      label_style: {
        // 解决不对齐的问题
        'width': "290px",
        // 排列第二行
        'word-break': 'break-all',
      },
    };
  },
  created() {
  },
  methods: {
    // 打开预览组件
    handlePreview(row) {
      this.$refs.preview.handleOpen(row);
    },
    // 节点单击事件
    handleNodeClick(data, node) {
      this.loadingFj = true
      //根据附件类型查询附件列表
      this.jjkcsqFileType = data.type
      selectJjkcsqFjList(this.jjkcsqId, this.jjkcsqFileType).then(resFileList => {
        this.jjkcsqFjList = resFileList.data;
        this.loadingFj = false
      })
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 文件下载处理
    handleDownload(row) {
      const resource = row.fileName;
      // 默认方法
      this.$download.resource(resource);
    },
    getFileNames(row) {
      // 从路径中提取文件名
      return row.fileName.split('/').pop(); // 返回文件名部分
    },
    handleOpen(row) {
      this.loading = true;
      this.jjkcsqId = row.jjkcsqId
      this.dialogVisible = true
      this.getJjKcSqData()
      setTimeout(() => {
        this.loading = false
      }, 1000)
    },
    //获取详情数据
    getJjKcSqData() {
      const jjkcsqId = this.jjkcsqId
      getJjkcsq(jjkcsqId).then(res => {
        this.jjkcSqData = res.data
        selectJjkcsqFjList(jjkcsqId, this.jjkcsqFileType).then(res => {
          this.jjkcsqFjList = res.data

          //点击树表第一个节点
          this.$nextTick(() => {
            const firstNode = this.$refs.tree.store.nodesMap['1']; // 默认点击id为1的节点
            if (firstNode) {
              this.$refs.tree.setCurrentKey(firstNode.key);
              this.handleNodeClicks(firstNode.data);
            }
          });

        })
      })
    },
    handleNodeClicks(data) {
      this.loadingFj = true
      this.jjkcsqFileType = data.type
      selectJjkcsqFjList(this.jjkcsqId, this.jjkcsqFileType).then(resFileList => {
        this.jjkcsqFjList = resFileList.data;
        this.loadingFj = false
      })
    },

  }
};
</script>

<style scoped>
.right-align-label {
  text-align: right;
}
</style>
